<template>
  <div :class="switchValue == '' ? 'home_dark' : 'home_' + switchValue ">
    <div class="second-page">
      <div class="wrap">
        <div class="header">
          <div class="title">成都市规划和国土资源办公门户-服务大厅</div>
          <div class="header-right-box">
            <div class="header-menu-box">
              <p
                @click="$router.push('/home')"
                style="
                  cursor: pointer;
                  color: rgba(0, 118, 255, 1);
                  font-weight: bold;
                "
              >
                主页
              </p>
              <div class="theme">
                <span>您好，{{ userInfo.userName }}</span>
                <span @click="logout">
                  <i class="el-icon-switch-button"></i>退出
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="banner">
        <div class="wrap">
          <div class="header-search-box">
            <el-input></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="wrap">
          <div class="crumbs-box">
            <p>系统导航> <span>工程建设审批</span></p>
          </div>
          <el-row :gutter="20">
            <el-col :span="5">
              <!-- 知识库 -->
              <div class="module-box knowledge-box">
                <div class="module-title">
                  <p>知识库</p>
                </div>
                <div class="knowledge-list">
                  <div class="knowledge-list-item">
                    <p>常见问题</p>
                  </div>
                  <div class="knowledge-list-item cur-item">
                    <p>操作手册</p>
                  </div>
                </div>
              </div>
              <!-- 热门标签 -->
              <!-- <div class="module-box">
                <div class="module-title">
                  <p>热门标签</p>
                </div>
                <div class="rmbq-box">
                  <div class="rmbq-item" v-for="item in 10" :key="item">
                    <p>操作手册</p>
                  </div>
                </div>
              </div> -->
            </el-col>
            <el-col :span="19">
              <!-- 列表 -->
              <div class="module-box serve-hotline-box">
                <div class="module-title">
                  <p>公文拟稿规范</p>
                </div>
                <div class="msg-content">
                  <div class="msg-title">
                    <p>公文拟稿规范具体步骤是什么？</p>
                    <p>来源：信息中心</p>
                  </div>
                  <div class="msg-val-box">
                    <p>
                      1.正文:
                      正文内不需要标注标题，后期办公室排版会自动添加,在拟稿时需确定拟稿单上标题是否准确，有无语病，请示与报告不得用于同一公文中。
                      2.word 附件:
                      第一行居左标注“附件”二字(后无冒号)，黑体三号，不加粗，第二行居中标注标题名称，与正文标题一致，为二号方正小标宋，不加粗，空一行
                      后起正文内容。 3.excel附件:
                      第一行居左标注“附件”二字（后无冒号)，12号黑体不加粗，第二行位于表格居左标注标题名称，16号方正小标宋不加粗，第三行起编辑正文内容。
                    </p>
                  </div>
                  <div class="chose-box">
                    <p>您觉得这条知识有帮助吗？</p>
                    <div class="bz-btn-box">
                      <div :class="['bz-btn-item',avail == '是' ? 'cur-btn' : '']"  @click="avail = '是'">
                        <span>
                          <img
                            src="@/assets/image/servePage/icon-ybz2.png"
                            alt=""
                            v-if="avail == '是'"
                          />
                          <img
                            src="@/assets/image/servePage/icon-ybz1.png"
                            alt=""
                            v-else
                          />
                        </span>
                        <p>有帮助</p>
                      </div>
                      <div :class="['bz-btn-item',avail == '否' ? 'cur-btn' : '']" @click="avail = '否'">
                        <span>
                          <img
                            src="@/assets/image/servePage/icon-mbz2.png"
                            alt=""
                            v-if="avail == '否'" />

                          <img
                            src="@/assets/image/servePage/icon-mbz1.png"
                            alt=""
                            v-else
                        /></span>
                        <p>没帮助</p>
                      </div>
                    </div>
                    <div class="commit-box">
                      <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="请输入您的意见建议"
                        v-model="opinionVal"
                        style="margin-bottom: 20px"
                      >
                      </el-input>
                      <el-button type="primary" plain>提交</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <footerCom></footerCom>
    </div>
  </div>
</template>
<script>
import $ from "jquery"; //引入jquery，否则document.getElementById为null
import footerCom from "./footerCom.vue"
export default {
  components: { footerCom },
  data() {
    return {
      switchValue: 'dark',
      userId: localStorage.getItem("USER_ID"),
      interfaceName: "antu.newportal-zjx.provider",
      userInfo: "",
      opinionVal: "",
      avail: "是",
    };
  },
  methods: {
    logout() {
      localStorage.removeItem("USER_ID");
      localStorage.removeItem("TOKEN");
      this.$router.push("/");
    },
    getUserInfo() {
      var that = this;
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserInfo",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);
            that.userInfo = response.result;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    // 获取用户主题
    getUserStyle() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserStyle",
          args: [this.userId],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            if (response.result == "1") {
              this.switchValue = "light";
            } else {
              this.switchValue = "dark";
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {
    //   获取用户信息
    this.getUserInfo();
    // 获取用户所选主题
    this.getUserStyle()
  },
  beforeMount() {},
  mounted() {
    // 获取用户有权限的菜单
    this.getUserLinkPower();
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scoped>
@import "./css/light.less";
@import "./css/dark.less";

p {
  margin: 0;
  padding: 0;
}

.second-page {
  .wrap {
    width: 85%;
    margin: 0 auto;
  }

  .crumbs-box {
    font-weight: bold;
    padding: 0 0 20px;

    span {
      font-size: 16px;
      color: rgba(54, 112, 255, 1);
    }
  }

  .content {
    background: none;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 35px;
    padding: 0 !important;
    box-shadow: none;
    margin-left: 0;
  }

  .header-right-box {
    display: flex;
    align-items: center;
  }

  .header-menu-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    padding-right: 40px;

    p {
      color: rgba(67, 67, 67, 1);
      font-size: 14px;
    }
  }

  .header-search-box {
    width: 70%;
    max-width: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;

    & /deep/ .el-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .banner {
    width: 100%;
    height: 161px;
    background-image: url("../assets/image/banner-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .banner .wrap {
    padding: 0 120px 0 145px;
    position: absolute;
    display: flex;
    height: 161px;
    // align-items: flex-end;
  }

  .banner-left-title {
    margin-left: 152px;
    width: 300px;
    height: 70px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    background-color: rgba(54, 112, 255, 1);
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;

    p {
      font-size: 28px;
      color: #ffffff;
      font-weight: bolder;
    }
  }

  .banner-right-crumbs {
    position: absolute;
    bottom: 0;
    left: 500px;
    color: #ffffff;
    z-index: 2;
  }

  .main .wrap {
    box-sizing: border-box;
    padding: 24px;
  }

  .module-box {
    background-color: #ffffff;
    padding: 20px 10px;
    margin-bottom: 24px;
    .module-title {
      font-size: 16px;
      color: #333333;
      border-bottom: 1px rgba(204, 204, 204, 0.4) solid;
      padding-left: 10px;

      p {
        display: inline-block;
        border-bottom: 2px rgba(170, 205, 244, 1) solid;
        padding: 5px 0;
        padding-bottom: 10px;
        font-weight: bold;
      }
    }
  }

  .rmbq-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 0 0 0;

    .rmbq-item {
      width: 48%;
      font-size: 14px;
      color: #4f4f4f;
      box-sizing: border-box;
      padding: 5px;
      margin-bottom: 10px;
      background: #f0f7ff;
      text-align: center;
      border-radius: 5px;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        background: rgba(54, 112, 255, 1);
        color: #ffffff;
      }
    }
  }

  .knowledge-list {
    width: 100%;

    .knowledge-list-item {
      text-align: left;
      padding: 10px 20px;
      border-radius: 5px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background-color: rgba(238, 243, 255, 0.5);
      }
    }

    .knowledge-list-item.cur-item {
      background-color: rgba(238, 243, 255, 1);
      color: rgba(68, 145, 232, 1);
    }
  }

  .msg-content {
    padding: 10px;

    .msg-title {
      padding: 10px 0;
      display: flex;

      p:first-of-type {
        font-size: 20px;
        font-weight: 500;
        color: #000000;
      }

      p:last-of-type {
        font-size: 16px;
        font-weight: 500;
        color: #828282;
        margin-left: 20px;
      }
    }

    .msg-val-box {
      padding-bottom: 30px;
    }

    .chose-box > p:first-of-type {
      text-align: center;
      color: rgba(79, 79, 79, 1);
      padding: 10px 0;
    }

    .bz-btn-box {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bz-btn-item {
      display: flex;
      align-items: center;
      color: rgba(130, 130, 130, 1);
      font-size: 12px;
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px #ccc solid;
      margin-right: 10px;
      cursor: pointer;
      background-color: rgba(229,229,229,1);

      img {
        width: 17px;
        height: 15px;
      }

      p {
        margin-left: 10px;
      }
    }

    .bz-btn-item.cur-btn{
        background-color: rgba(64,158,255,1);
        color: #ffffff;

    }

    .commit-box {
      text-align: center;
    }
  }
}
</style>